<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <cw:base/>
  </head>
  <body>
  	<ul>
		<li>
			<b>表格构件提供了多种表格样式来满足各种界面需求，包括表格大小、自适应、列宽度、斑马线等。</b>
		</li>
		<li>
			<b>表格构件的width和height属性分别定义表格的宽度和高度，不设置即使用默认值0的情况下则自适应宽度到表格所在容器，自适应高度到展示所有表格数据所需的高度。</b>
		</li>
		<li>
			<b>表格构件的forceFit属性(默认值true)定义是否调整各列宽度以撑满整个表格宽度；
			stripeRows属性(默认值true)定义是否启动斑马线；stripeColor属性定义斑马线颜色，可以直接配置颜色名称(如red)或颜色码(如#c0c0c0)。</b>
		</li>
		<li>
			<b>表格列构件的width属性(默认值60)定义表格列的宽度，可以使用百分比%。</b>
		</li>
		<li>
			<b>表格列构件的indexColumn支持自定义标题(默认值编号)，宽度(默认值30)。</b>
		</li>
	</ul>
	<br/>
	<br/>
	<ul>
  		<li>
  			设置表格宽度和高度,同时,设置选择模式(cell),允许鼠标选中单元格复制其内容
				<cw:grid id="grid1" title="表格样式1"
					url="../../../../sample/grid/grid.query.action"
					enablePage="false" exportable="false" selectMode="cell"
					width="800" height="300" urlParams="{id:0}"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
					<cw:indexColumn indexWidth="60" title="默认序号" />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="120" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
  		<li>
  			表格自适应，不设置表格宽度和高度
				<cw:grid id="grid2" title="表格样式2"
					url="../../../../sample/grid/grid.query.action"
					enablePage="false" exportable="false" selectMode="checkbox"
					urlParams="{id:0}"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="120" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
  		<li>
  			设置表格列宽度，支持百分比，设置forceFit为true，调整列宽和表格宽度适应
				<cw:grid id="grid3" title="表格样式3"
					url="../../../../sample/grid/grid.query.action"
					enablePage="false" exportable="false" selectMode="checkbox"
					urlParams="{id:0}" forceFit="true"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
  		<li>
  			设置表格列宽度，支持百分比，设置forceFit为false，保持列宽
				<cw:grid id="grid4" title="表格样式4"
					url="../../../../sample/grid/grid.query.action"
					enablePage="false" exportable="false" selectMode="checkbox"
					urlParams="{id:0}" forceFit="false"
					stripeRows="true" stripleColor="#c0c" autoLoad="true">
					<cw:indexColumn />
					<cw:gridColumn property="id" width="60" title="编号" />
					<cw:gridColumn property="name" width="120" title="姓名" />
					<cw:gridColumn property="email" width="30%" />
					<cw:gridColumn property="age" width="80" title="年龄" />
					<cw:gridColumn property="birthday" width="120" dataType="date" format="Y-m-d" />
					<cw:gridColumn property="sex" width="80" rendererData="[[1,'男'],[2,'女']]" />
					<cw:gridColumn property="created" width="120" title="创建时间" dataType="date" format="Y-m-d" />
				</cw:grid>
				<br/>
		</li>
	</ul>
	
	<script type="text/javascript">
		Ext.onReady(function(){ 
			Wonders.grid.copyCellContent("grid1");
		});
	</script>
	
  </body>
  <cw:theme></cw:theme>
 </html>